繼上次理解玩前端需要會的技術後，今天我們直接進行簡單的實作，所選的題目是 side project 入門磚： Todo List 專案。

身為全端工程師有時也需要自己擔任自己的 PM，之後的案例會更深刻體會到自己管理專案的感覺，此篇先以最簡單的功能來進行即可，目的是為了熟悉賺寫前端的感覺。

牛頓曾說：如果我能看得更遠， 那是因為站在巨人的肩膀上，身為軟體工程師許多輪子不需要重造，基本上一些工具可以很大程度的幫助我們建立專案，想要建立 Vue3 前端專案我們可以使用 Vue Cli 來幫助我們進行。

建立專案

vue create todo-list-frontend

建立後需要選擇框架的設定

• Please pick a preset: Manually select features
• Check the features needed for your project: (選擇以下選項)
  • Choose Vue version
  • Babel
  • Router
  • CSS Pre-processors
  • Linter/Formaster
  • Unit Testing
• Choose a version of Vue.js that you want to start the project with: 3.x (Preview)
• Use history mode for router: Y
• Pick a CSS pre-processor: Sass/SCSS (with dart-sass)
• Pick a linter / formatter config: ESLint + Airbnb config
• Pick additional lint features: Lint on save (可依個人喜好)
• Pick a unit testing solution: Jest
• Where do you prefer placing config for Babel, ESLint, etc.?(Use arrow keys): In dedicated config files (可依個人喜好)

check local server

可以利用預設指令打開本地的伺服器查看建立狀況，成功連線後可以看到預設的 Vue 專案畫面

規劃

我們可以找一下網路上公開的設計稿來練習： Template
基本上參考他的介面我們可以設計以下功能

• 顯示所有任務介面
• 增加任務介面